/**
* @description: 通信网管巡视巡检工单班组成员 —— 已完成
* @author: JiWei
* @date:
**/
<template>
	<view class="task-monitor-main">
		<nav-bar class="header" back title="已完成" @goBack="goBack" />
		<!-- banner -->
		<view class="top-banner">
			<view class="left-banner">
				<text class="left-banner-title">{{headerMsg.userName}}分配的{{headerMsg.distributionTime}}{{headerMsg.workOrderType}}</text>
				<text class="left-banner-time">网管执行人员：{{headerMsg.ExecutiveList}}</text>
			</view>
			<view :class="stateColor">{{state}}</view>
		</view>
		<!-- main -->
		<main>
			<view class="main-top">
				<van-field v-model="roundsNum" label="巡视次数" readonly error-message-align="right">
					<template #right-icon>
						<view class="round-title">{{roundsType}}</view>
					</template>
				</van-field>
				<van-field v-model="netWorkManagement" label="网管执行人员" readonly error-message-align="right" />
				<van-field v-model="roundsTime" label="巡视时间" readonly error-message-align="right" />
			</view>
			<view class="main-top">
				<van-field v-model="leaveTime" label="离开时间" readonly error-message-align="right" />
			</view>
			<div class="commonbj">
				<van-collapse v-model="activeName" accordion label-class="wggrade">
					<van-collapse-item name="grade" size="large">
						<template #title>
							<view>
								<text style="font-size: 14px;">网管等级</text>
							</view>
						</template>
						<van-collapse v-model="activeNames" v-for="(item,index) in gradeList" :key="index">

							<van-collapse-item :name="item.ID" size="large">
								<template #title>
									<view>
										<text style="font-size: 14px;color: #417ADC;">{{ item.NAME }}</text>
									</view>
								</template>
								<template v-for="(ite,index) in item.child">
									<van-field :label="ite.NAME" :key="index" input-align="right">
										<template #input>
											<van-radio-group v-model="ite.alarmState" disabled direction="horizontal">
												<van-radio  name="0">正常
													<template #icon="props">
														<img class="img-icon"
															:src="props.checked ? activeIcon : inactiveIcon" alt="">
													</template>
												</van-radio>
												<van-radio  name="1">异常
													<template #icon="props">
														<img class="img-icon"
															:src="props.checked ? selectIcon : inactiveIcon" alt="">
													</template>
												</van-radio>
											</van-radio-group>
										</template>
									</van-field>
									<view v-if="ite.alarmState === '1'">
										<van-collapse v-model="activePolice">
											<van-collapse-item :name="ite.ID" size="large">
												<template #title>
													<view style="float: left;">
														<text style="font-size: 14px;">{{ titlePolice }}</text>
													</view>
												</template>
												<view class="police-main" v-for="(alarmitem,index) in ite.alarmList" :key="index">
													<view class="police-top">
														<text class="police-title">告警{{index*1+1}}</text>
														<text v-if="alarmitem.state==='1'" class="recovered">已消除</text>
													</view>
													<view class="police-small-title">告警照片:（最多上传3张）</view>
													  <ul class="plice-img">
														<li v-for="(item,index) in alarmitem.files" :key="index">
														  <img v-if="item.img" :src="item.img" alt="" @click="imageHandle(item)">
														</li>
													  </ul>
													<van-divider dashed />
													<view class="remark-info-container">
														<text class="remark-title">告警信息</text>
														<div class="remark-wrap">
															<textarea class="remark-text" readonly v-model="alarmitem.explain"
																placeholder="这里是告警信息" />
														</div>
													</view>
												</view>
											</van-collapse-item>
										</van-collapse>
									</view>
								</template>

							</van-collapse-item>

						</van-collapse>
					</van-collapse-item>
				</van-collapse>
			</div>
		</main>
    <van-popup class="van-preview-wrap" v-model="showPreview" @click="showPreview = false">
      <van-swipe>
        <div v-for="(image, index) in files" :key="index">
          <van-swipe-item v-if="image.img" style="text-align: center;">
            <img :src="image.img" />
          </van-swipe-item>
        </div>
      </van-swipe>
    </van-popup>
	</view>
</template>
<script>
  import config from "../../../common/config";
	import navBar from "../../../components/common/nav-bar";
	import moment from "moment";
	import { mapGetters } from "vuex";
	export default {
		name: 'networkCompleted',
		components: {
			navBar,
      config
		},
		props: {},
		data() {
			return {
        baseUrl:'',
				roundsType:'',
				headerMsg:'',
				titlePolice: "告警内容",
				statusDetails: false,
        showPreview: false,
				state: '已完成',
				stateCode: '1',
				roundsNum: '一巡',
				netWorkManagement: '',
				roundsTime: '',
				leaveTime: '',
				activeIcon: require('../../../static/img/zcxz.png'),
				inactiveIcon: require('../../../static/img/wx.png'),
				selectIcon: require('../../../static/img/ycxz.png'),
				gradeList: [],
        files: {},
				activeName: "grade",
				activeNames: [],
				activePolice: ['1'], // 三级折叠框
			};
		},
		computed: {
			  ...mapGetters(['userData']),
			// 计算banner框的流程状态
			stateColor() {
				if(this.stateCode === '1') {
						 return 'left-state-tg'
				}else if(this.stateCode === '2') {
						return 'left-state-dsp'
				}else {
				 return 'left-state-jj'
				}
			},
		},
		watch: {},
		onLoad(option) {
      config.getOptions.then(res => {
        this.baseUrl = res.firstUrl;
      })
			this.id = option.id;
			this.getTaskListDetail()
		},
		mounted() {},
		methods: {
			getTaskListDetail(){
				var params = {
					id:this.id
				}
				this.$api.getTaskListDetail(params).then(res => {
					const msg = res.data;
					this.headerMsg = {
						userName: msg.assignPersonnelName,
						distributionTime: msg.inspectionDay,
						workOrderType: msg.name,
						ExecutiveList: msg.executiveName
					};
					this.roundsNum = msg.inspectionNum;
					this.roundsType = moment(msg.inspectionStartDate).format('H:m');
					this.netWorkManagement = msg.executionPersonName;
					this.roundsTime = moment(msg.executionTime).format("YYYY-MM-DD HH:mm:ss");
					this.leaveTime = moment(msg.leaveTime).format("YYYY-MM-DD HH:mm:ss");

					this.gradeList = msg.alarm;
					this.gradeList.forEach((item,key)=>{
						this.activeNames.push(item.ID)
            item.child.map(ite => {
               ite.alarmList.map(itemF => {
                 itemF.files.map((itImg,index,arr) => {
                   arr[index].img = itImg.img ? this.baseUrl + itImg.img : ''
                  return {
                    ...itImg
                  }
                })
              })
            })
          })
            
				})
			},
      imageHandle(item) {
        this.files = [item]
        this.showPreview = true
      },
			goBack() {
				uni.navigateTo({
					url: '/pages/operationApprove/communicationNetWorkMember/communicationNetWorkMember'
				})
			}
		}
	};
</script>
<style scoped lang="scss">
	.task-monitor-main {
		min-height: 100vh;
		background: #F2F6FA;

		.top-banner {
			width: px2vw(1080);
			 height: px2vh(240);
			background: #fff;
			margin-bottom: px2vw(30);

			.left-banner {
				width: px2vw(600);
				margin-top: px2vh(47);
				height: px2vh(98);
				float: left;
				margin-left: px2vh(50);

				.left-banner-title {
					display: block;
					font-size: px2vw(42);
					color: #417ADC;
				}

				.left-banner-time {
					font-size: px2vw(36);
					color: #666;
				}

			}

			.left-state-dsp,
			.left-state-tg,
			.left-state-jj {
				width: px2vw(220);
				height: px2vh(80);
				margin-right: px2vh(30);
				margin-top: px2vh(55);
				float: right;
				font-size: px2vw(42);
				font-weight: 700;
				border-radius: px2vw(40);
				text-align: center;
				line-height: px2vh(80);
			}

			.left-state-tg {
				color: #3CDA68;
				background: rgba(62, 218, 104, 0.1);
			}

			.left-state-dsp {
				color: #FF7070;
				background: rgba(255, 112, 112, 0.1);
			}

			.left-state-jj {
				color: #FFAD0E;
				background: rgba(255, 180, 0, 0.1);
			}

			.remark-info-container {
				color: #666666;
				border-radius: px2vw(20);
				overflow: hidden;
				margin-top: px2vh(63);

				.remark-title {
					display: block;
					margin-left: px2vw(69);
					margin-bottom: px2vh(52);
				}

				.remark-wrap {
					width: px2vw(748);
					height: px2vh(285);
					margin: auto;
					border-radius: px2vw(20);
					padding: px2vh(20);
					.remark-text {
						width: 100%;
						height: px2vh(285);
					}
				}


			}

			.isrequired::before {
				content: "*";
				color: #FF4355;
				display: inline-block;

			}
		}

		main {
			width: calc(100% - #{px2vw(60)});
			margin: auto;
			height: calc(100vh - #{px2vh(435)});
			overflow-x: hidden;
			.commonbj {

				background-color: #fff;
				margin-bottom: px2vh(30);

				.round-title {
					width: px2vh(110);
					height: px2vh(50);
					line-height: px2vh(50);
					font-size: px2vh(36);
					text-align: center;
					color: #417ADC;
					border-radius: px2vh(10);
					background: rgba(65, 122, 220, .1)
				}

				.img-icon {
					height: px2vh(40);
				}

				/deep/.van-collapse-item__content {
					padding: 0 px2vh(30);
				}

				.select_content_tabs {
					.commonbj {
						background-color: #fff;
						margin-bottom: px2vh(30);

					}

					/deep/.van-tabs__wrap {
						display: none !important;

					}

					/deep/.van-tabs__content {
						margin-top: px2vh(100);
					}



					/deep/.van-radio--horizontal:last-child {
						margin-right: 0;
					}

				}

				.contentbj {
					background-color: #F2F6FA;


				}

				.tabbarlist {
					height: px2vh(100);
					// width: px2vh(920);
					width: calc(100% - #{px2vw(60)});
					border-radius: px2vh(20);
					margin: 0 auto;

					view {
						width: px2vh(305);
						height: px2vh(100);
						margin-top: px2vh(50);
						line-height: px2vh(100);
						display: inline-block;
						text-align: center;
						color: #417ADC;
						font-size: px2vh(40);
						background-color: rgba(65, 122, 220, 0.1);
						border-right: px2vh(1) solid #C9CED6;

						text {
							width: px2vh(30);
							height: px2vh(30);
							display: inline-block;
							margin-right: px2vh(14);
						}

						text.executed {
							background: #FFAD0E;
						}

						text.exceedtime {
							background: #FF4355;
						}

						text.finished {
							background: #41DC83;
						}
					}


					view:last-child {
						border-right: none;
					}

					.active {
						color: #FFFFFF;
						background: #417ADC;
					}
				}

				.custom-title {
					display: flex;
					align-items: center;

					img {
						width: px2vh(42);
						margin-right: px2vw(29);
					}
				}
			}
.police-main {
					width: px2vw(850);
					height: auto;
					background: #f5f5f5;
					border-radius: px2vh(10);
					margin-bottom: px2vh(20);
					padding: 0 px2vh(40) px2vh(40);

					.police-top {
						height: px2vh(40);
						padding-top: px2vh(55);
						padding-bottom: px2vh(55);
						margin: auto;
						border-bottom: px2vh(1) solid #E5E5E5;
						margin-bottom: px2vh(20);

						.police-title {
							color: #666;
							margin-left: px2vw(69);
						}

						.police-img {
							height: px2vh(40);
							float: right;
							margin-right: px2vw(40);
						}
					}	.recovered{
							// width: px2vh(84);
							height: px2vh(56);
							padding: 0 10px;
							box-sizing: border-box;
							background-color: rgba(255,112,112,0.1);
							border-radius: px2vh(10);
							color: #FF7070;
							float: right;
							margin-right: px2vw(40);
						}

					.police-small-title {
						color: #666;
						font-size: 14px;
						margin-left: px2vw(69);
						margin-bottom: px2vh(20);
					}
          .plice-img {
            width: calc(100% - #{px2vw(104)});
            height: px2vh(215);
            margin-left: px2vw(20);
            li {
              width: px2vw(215);
              height: px2vh(215);
              float: left;
              margin-right: px2vw(50);
              img{
                width: px2vw(215);
                height: px2vw(215);
                margin-right: px2vw(40);
                border-radius: px2vw(6);
              }
            }
            li:last-child {
              margin-right: 0;
            }
          }
				}
			.main-top {
				overflow: hidden;
				border-radius: px2vh(20);
				margin-bottom: px2vh(30);

				.round-title {
					color: #417ADC;
					padding: px2vw(10) px2vh(26);
					border-radius: px2vh(10);
					background: rgba(65, 122, 220, .1)
				}
			}

			/deep/ .van-field__control {
				text-align: right;
			}
			/deep/.van-field__label {
				// flex: 1;
				width: 10em;
			}
			/deep/.van-field__value{
				// flex: 0.9;
				// flex-wrap: nowrap;
			}
			/deep/.van-radio-group--horizontal{
				flex-wrap: nowrap;
			}
			/deep/.van-radio{
				flex-wrap: nowrap;
			}
		}
    .van-preview-wrap {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      .van-swipe {
        width: 100%;
        height: 60%;
        .van-swipe-item {
          display: flex;
          align-items: center;
          img {
            width: 100%;
          }
        }
      }
    }
    .van-popup {
      background-color: #eee;
      .van-cell {
        position: absolute;
        bottom: 0;
        border-top: 4px solid #eee;
        z-index: 3;
      }
    }
	}
</style>
